{% extends "mobile/base-mobile.html" %}

{% block header %}


{% endblock %}



{% block main %}

	<h1 style="text-align: center; font-family: 'Lobster'; color: #1B6FC4;
		 font-size: 50px; letter-spacing: 5px; margin: 0; padding-top: 5%">fleq</h1>

	<h4 style="text-align: center; font-family: 'Lobster'; margin-left: 5%; margin-right: 5%; margin-bottom: 0;
			letter-spacing: 1px;">A synchronous online competition to motivate and improve learning</h4>


	<div data-role="content">

		{% if loginForm.errors %}<div class="ui-body ui-body-e">{% endif %}
		{% if loginForm.non_field_errors %}{% for error in loginForm.non_field_errors %}{{ error }}{% endfor %}<br/>{% endif %}
		{% if loginForm.errors %}</div>{% endif %}	
		<form id="loginForm" action="/" method="POST" enctype="multipart/form-data" >
				<p><input id="id_username" type="text" name="username" maxlength="100" 
						class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" placeholder="username"></p>
				<p><input id="id_password" type="password" name="password" maxlength="100"
						 class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" placeholder="password"></p>
				<center>
					<a href="/" onclick="document.getElementById('loginForm').submit();" 
					data-role="button" data-theme="b" data-icon="star" data-iconpos="left">Log In</a>
				</center>
		</form>

	    <h4 style="font-family: 'Lobster'; letter-spacing: 1px; margin-top: 10%">
	        Create a new account?
	    </h4>

	    <a href="/signin" data-role="button" data-theme="b" data-icon="star" data-iconpos="left">
	        Sign In
	    </a>
	</div>

{% endblock %}



{% block footer %}

	<div data-theme="d" data-role="footer">
	    <h3>
	        © FLEQ - 2012
	    </h3>
	</div>

{% endblock %}
